<template>
    <div id="desk-main">
        <div>
            <div>
                <div>
                    <ul id="head">
                        <li>
                            <router-link to="#" class="desk">桌位列表</router-link>
                        </li>
                        <li>
                            <router-link to="/index/deskfication" class="desk">桌位类型</router-link>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul id="type">
                        <li><el-button class="typebtn"  @click="queryDesk(null)" round>全部桌位</el-button></li>
                        <li v-for="(dt,index) in deskType" :key="index">
                            <el-button class="typebtn" @click="queryDesk(dt.deskTypeId)" round>
                                {{dt.deskName}}
                            </el-button>
                        </li>
                        <li @click="operation">
                            <el-button class="typebtn" round style="margin-left: 100px;font-size: 14px;">
                                操作桌台
                            </el-button>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul id="desk">
                        <li v-for="(des,index) in desks" :key="index">
                            <div @click="seeDeskInfo(des.deskId)">
                                <div id="oper" v-show="visible" >
                                <span id="mod" :plain="true" @click="queryDeskOne(des.deskId)">
                                    <img src="../../../public/qrimage/modify.png" height="20px" width="20px"/>
                                </span>
                                    <span id="del" @click="delDesk(des.deskId,des.deskQrCode)">
                                    <img src="../../../public/qrimage/delete.png" height="20px" width="20px"/>
                                </span>
                                </div>
                                <button type="button" :class="status[des.deskStatus]">
                                    <p class="size" :class="{sizeColor:des.deskStatus==0}">可坐<span>{{des.deskSize}}</span>人/本桌<span>{{des.deskPeopleNumber}}</span>人</p>
                                    <div class="state" :class="{stateColor:des.deskStatus==0}">
                                        <h3>{{des.deskType.deskName}}{{des.deskCode}}号桌</h3>
                                        <span v-if="des.deskStatus==0">空闲</span>
                                        <span v-else-if="des.deskStatus==1">正在使用</span>
                                        <span v-else-if="des.deskStatus==2">已预定</span>
                                        <span v-else-if="des.deskStatus==3">正在清扫</span>
                                    </div>
                                </button>
                            </div>

                            <div>
                                <img src="../../../public/qrimage/QRimg.png" @click="viewQR(des.deskId)"
                                     style="padding-left: 50px;padding-top: 5px" height="35" width="35"/>
                            </div>
                        </li>
                        <li>
                            <button type="button" style="border: 2px dashed #fb6e38;" @click="dialogFormVisible = true">
                                <h1>
                                    +
                                </h1>
                            </button>

                        </li>
                    </ul>

                    <el-dialog
                            title="提示"
                            :visible.sync="dialogDeskInfoVisible"
                            width="30%">
                            <el-table
                                    :data="tableData"
                                    height="250"
                                    border
                                    style="width: 100%">
                                <el-table-column
                                        prop="date"
                                        label="菜品图片"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="菜品名称"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="address"
                                        label="菜品价格"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="address"
                                        label="是否完成"
                                        width="180">
                                </el-table-column>
                            </el-table>
                            <div>

                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogDeskInfoVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogDeskInfoVisible = false">确 定</el-button>
                            </span>
                    </el-dialog>
                </div>
            </div>
            <div>
                <el-dialog title="添加桌台" style="font-weight: bold;font-family: 微软雅黑" width="40em" :visible.sync="dialogFormVisible">
                    <el-form :model="desk">
                        <el-form-item label="桌台号码" class="text-width" :label-width="formLabelWidth">
                            <el-input v-model="desk.deskCode" placeholder="桌台编号" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="桌台区域" :label-width="formLabelWidth">
                            <el-select v-model="desk.deskTypeId" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in deskType"
                                        :key="item.deskTypeId"
                                        :label="item.deskName"
                                        :value="item.deskTypeId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="桌台可坐人数" class="text-width" :label-width="formLabelWidth">
                            <el-input v-model="desk.deskSize" placeholder="可坐人数" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false,clear">取 消</el-button>
                        <el-button type="primary" @click="addOrModifyDesk(addOrModify)">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <div>
                <el-dialog title="查看二维码" style="font-weight: bold;font-family: 微软雅黑" width="340px" :visible.sync="dialogVisible">
                    <p>可以右键保存打印</p>
                    <div>
                        <img :src="imgFile" height="300" width="300"/>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Desk",
        data(){
            return{
                dialogDeskInfoVisible:false,
                visible: false,
                typeDesk:{
                    shopid:JSON.parse(sessionStorage.getItem("bid")),
                    typeid:null,
                },
                desks:[],
                status:[
                    {one:true},
                    {two:true},
                    {three:true},
                    {four:true}
                ],
                desk:{
                    deskCode:null,
                    deskTypeId:null,
                    deskSize:null,
                    buId:JSON.parse(sessionStorage.getItem("bid"))
                },
                deskType:[],
                dialogFormVisible: false,
                dialogVisible:false,
                formLabelWidth: '120px',
                imgFile:"",
                del:{
                    did:"",
                    qr:"",
                },
                addOrModify:0,
            }
        },
        mounted() {
            this.queryDesk();
            this.queryDeskType()
        },
        methods:{
/*            seeDeskInfo(){
                this.dialogDeskInfoVisible = true
                this.$axios.post("/administration/order/see/desk/order/info").then(result=>{
                    this.queryOrderInfo(result.data.orderId)
                })
            },
            queryOrderInfo(id){
                this.$axios.post("/administration/order/see/desk/order/info",id).then(result=>{

                })
            },*/
            queryDesk(tid){
                this.typeDesk.typeid = tid
                this.$axios.post("/administration/desk/query-desk",this.typeDesk).then(result=>{
                    this.desks = result.data
                })
            },
            queryDeskType(){
                this.$axios.post("/administration/desk-type/query-desk-type",this.typeDesk.shopid).then(result=>{
                    this.deskType = result.data
                })
            },
            addOrModifyDesk(status){
                if (status==1){
                    this.$axios.post("/administration/desk/modify-desk",this.desk).then(result=>{

                        if (result.data>0){
                            this.$message({
                                message: '修改成功咯!',
                                type: 'success'
                            });
                            this.queryDesk();
                        }else{
                            this.$message({
                                message: '修改失败咯!',
                                type: 'warning'
                            });
                        }
                        this.dialogFormVisible = false
                        this.addOrModify = 0;
                        this.clear();
                    })
                }else{
                    this.$axios.post("/administration/desk/add-desk",this.desk).then(result=>{
                        if (result.data){
                            if (result.data>0){
                                alert("添加成功")
                                this.queryDesk();
                            }else{
                                alert("添加失败")
                            }
                        }else{
                            this.$message({
                                message: '抱歉您没有操作权限!',
                                type: 'warning'
                            });
                        }

                        this.dialogFormVisible = false
                        this.clear();
                    })
                }
            },
            clear(){
                this.desk.deskTypeId = "";
                this.desk.deskSize="";
                this.desk.deskCode = "";
            },
            viewQR(id){
                this.$axios.post("/administration/desk/query-qr-path",id).then(result=>{
                    this.imgFile=result.data
                    this.dialogVisible = true
                })
            },
            operation(){
                if (this.visible==false){
                    this.visible=true;
                }else{
                    this.visible=false;
                }
            },
            queryDeskOne(id){
                this.$axios.post("/administration/desk/query-desk-one",id).then(result=>{
                    this.desk = result.data
                    this.dialogFormVisible = true;
                    this.addOrModify = 1;
                })
            },
            delDesk(id,qr){
                this.del.did = id
                this.del.qr = qr
                if (confirm("确定要删除么!")){
                    this.$axios.post("/administration/desk/del-desk",this.del).then(result=>{
                        if (result.data){
                            if (result.data>0){
                                this.$message({
                                    message: '删除成功咯!',
                                    type: 'success'
                                });
                                this.queryDesk()
                            }else{
                                this.$message({
                                    message: '删除失败咯!',
                                    type: 'warning'
                                });
                            }
                        }else{
                            this.$message({
                                message: '抱歉您没有操作权限!',
                                type: 'warning'
                            });
                        }

                    })
                }

            }
        }
    }
</script>

<style>
    #desk-main{
        width: 1530px;
        padding: 15px;
        height: 800px;
    }
    .text-width{
        width: 30em;
    }
    ul{
        list-style-type: none;
    }
    #type{
        padding: 25px 0px 25px 15px;
    }
    #type li{
        display: inline-block;
        padding-left: 20px;
    }
    #type li .typebtn{
        height: 30px;
        border-radius: 20px;
        padding: 5px 20px 5px 20px;
        border: 1px solid #eeeeee;
        background-color: white;
    }




    #desk{
        width: 1460px;
        background-color: #f8f9fa;
        height: 630px;
    }
    .size{
        margin-bottom: 10px;
        color: white;
    }
    .state h3{
        padding-bottom: 5px;
    }
    .state{
        font-family: "微软雅黑";
        color: white;
    }
    #desk li{
        position: relative;
        padding-top: 20px;
        padding-left: 25px;
        float: left;
    }
    #desk li button{
        width: 139px;
        height: 139px;
        border-radius: 10px;
    }
    #desk li:last-child button{
        width: 139px;
        height: 139px;
    }
    #desk li:last-child h1{
        background-color: white;
        color: #ff8206;
        line-height: 120px;
        text-align: center;
        font-size: 100px;
        width: 135px;
        height: 135px;
    }
    #head{
        border-bottom: 1px solid #e6e6e6;
    }
    #head li{
        font-size: 14px;
        display: inline-block;
        width: 95px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .desk{
        font-family: "微软雅黑";
        color: #3c3c40;
        text-decoration: none;
    }


    .one{
        border: 2px dashed #fb6e38;
        background-color:  white;
    }

    .two{
        border: 2px dashed #fb6e38;
        background-color: #ff8206;
    }
    .sizeColor{
        color: #fb6e38;
    }
    .stateColor{
        color: #fb6e38;
    }

    .three{
        border: 2px dashed #4e8cdf;
        background-color: #54a7f5;
    }
    .four{
        border: 2px dashed #b7aeaf;
        background-color: #bdbdbd;
    }


    #oper{
        position: absolute;
        right: 0px;
        top: 10px;
        float: right;
    }
    #oper #del{
        margin-left: 5px;
    }




</style>